﻿<!DOCTYPE HTML>
<html>

	<head>
		<meta charset="UTF-8" />
		<title>弹簧运动</title>
		<style type="text/css">
			#moveBox {
				position: relative;
				width: 500px;
				height: 50px;
				border: 3px #0C3 solid;
			}
			
			span {
				width: 50px;
				height: 50px;
				display: inline-block;
				background-color: #09C;
				position: absolute;
			}
			
			#lineBox {
				width: 500px;
				height: 200px;
				border: 2px #0C3 solid;
				position: absolute;
			}
			
			.dot {
				width: 2px;
				height: 2px;
				font-size: 0;
				background-color: #006600;
				position: absolute;
			}
		</style>
	</head>

	<body>
		<div id="moveBox"> <span id="myspan"></span> </div>
		<h1 id="lineBox"> </h1>
		<script type="text/javascript">
			/*
						作业：在学习缓动曲线之前请完成以下运算符题目
						假设初始值  c=4,t=2,d=4; 
							题目一：var rs = c*(t/=d)*t*t	;rs结果是多少？ 
							题目二：var rs = c*((t=t/d-1)*t*t + 1); rs结果是多少？
							题目三：var rs = c/2*t*t  ; 
							题目四：var rs = t/=d/2;   ;rs结果是多少？
							题目五：var rs = c/2*((t-=2)*t*t + 2);  rs结果是多少？
						正确理解以上题目，这个缓动就很容易理解。
						*/
			//Quint,五次方缓动曲线，quint:五胞胎，ease舒缓，in入，out出
			//指数衰减的反弹缓动
			var Bounce = {
				easeIn: function(t, b, c, d) {
					return c - this.easeOut(d - t, 0, c, d) + b;
				},
				easeOut: function(t, b, c, d) {
					if((t /= d) < (1 / 2.75)) {
						return c * (7.5625 * t * t) + b;
					} else if(t < (2 / 2.75)) {
						return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b;
					} else if(t < (2.5 / 2.75)) {
						return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b;
					} else {
						return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b;
					}
				},
				easeInOut: function(t, b, c, d) {
					if(t < d / 2) return this.easeIn(t * 2, 0, c, d) * .5 + b;
					else return this.easeOut(t * 2 - d, 0, c, d) * .5 + c * .5 + b;
				}
			}
			/*
			说明：以上有三个独立函数组成，每个函数就是简单的四个数的加减乘除混合运算
			t: time变化时间取值范围0-d之间，参数d是duration持续时间
			b：begin 初始状态
			c：change 变化范围
			注意：t/d 的值其实就是获取一个 0-1之间的值，这种思想我们可以借鉴。
			*/
			var fnMove = Bounce.easeOut; //统一调用函数到fnMove变量，只要修改这一个地方就可以看到三个函数的变化趋势图和运动结果

			var change = 500,
				duration = 200,
				begin = 0,
				time = 0; //初始化参数
			var moveBox = document.getElementById("moveBox");
			var myspan = document.getElementById("myspan");
			var lineBox = document.getElementById("lineBox");

			//声明一个函数让小方块随时间变化进行运动
			function A() {
				time++; //其中time参数也就是t形参是不断变化的，从0边到duration
				myspan.style.left = fnMove(time, begin, change - 50, duration) + "px";
				if(time < duration)
					setTimeout(A, 1)
			}
			A();

			//------------lineBox变化趋势图，趋势图仅仅表明节奏的趋势
			//初始化参数表，通过begin参数调节起始位置，change参数调节结束位置
			var t2 = 0,
				b2 = 200,
				c2 = -200,
				d2 = 500; //趋势图
			//var t2=0,b2=0,c2=500,d2=200;    //实际值图
			var arr = [];
			for(; t2 <= d2; t2++) {
				//为对象添加一个存放缓动曲线的div
				arr.push('<div class="dot" style="left:' + (t2 - 1) + 'px;top:' + fnMove(t2, b2, c2, d2) + 'px"><\/div>');
			}
			lineBox.innerHTML = arr.join(''); //显示趋势图
		</script>
	</body>

</html>